<template>
  <html>
  <el-container>
    <transition name="el-fade-in-linear">
      <el-main class="outbox" >
        <el-container id="box">
          <el-aside id="left" width="40%">
            <div class="bg"></div>
          </el-aside>
          <el-main>
            <el-container>
              <el-main class="right">
                <h4>登录</h4>
                <form class="form">
                  <div class="submail">
                  <el-input class="acc" type="text" placeholder="手机号或学号或邮箱" v-model="form.userPass"></el-input>
                  <el-input class="acc" type="password" placeholder="密码" v-model="form.password" show-password></el-input>
                  </div>
                </form>
              </el-main>
              <el-footer class="foot">
                <el-button class="submit" @click="onsubmit">下一步</el-button>
                <div class="else">
                  <router-link to="/register" >注册账号</router-link>
                  <router-link to="/RetrievePw">找回密码</router-link>
                </div>
              </el-footer>
            </el-container>
          </el-main>

        </el-container>
      </el-main>
    </transition>

  </el-container>
  </html>
</template>

<script>
import {post} from "../common/serviceUtil";

export default {
  name: "ind",
  data(){
    return{
      flag:true,
      show1:true,
      show2:false,
      form : {
        userPass : "",
        password : ""
      },
    }
  },methods:{

    sleep(delay) {
      //delay表示的毫秒数
      var start = (new Date()).getTime();
      while ((new Date()).getTime() - start < delay) {
        continue;
      }
    },

    transform(){
      if(this.flag){
        this.tranform_1()
      }else{
        this.tranform_2()
      }
      this.flag = !this.flag
    },

    tranform_1() {
      this.show1 = !this.show1
      let vue = this
      setTimeout(function (){
        vue.show2 = !vue.show2
      },300)
    },

    tranform_2() {
      this.show2 = !this.show2
      let vue = this
      setTimeout(function (){
        vue.show1 = !vue.show1
      },300)
    },

    onsubmit(){
      let vue = this ;
      post("login",this.form).then(function (respone){
        if(respone.data.status===1){
          vue.$router.push({ path: "/guidePage"});
        }else{
          alert("有误！！！")
        }
      })

    }

  }
}
</script>

<style scoped>
html{
  background-image: url("/static/img/forbidden_city.jpg");

}

.outbox{
  margin-top: 10%;
  height: 660px;
  min-width: 70rem;
}
#box{
  background-color: rgba(255, 255, 255, 0.7);
  width:50%;
  margin-left:auto;
  margin-right: auto;
  min-width: 60rem;
  max-width: 68rem;
  height:100%;
  border-radius: 1.5rem;
}
#left{
  width: 40%;
  border-radius: 1.5rem 0 0 1.5rem;
}
.bg{
  height: 100%;
  width: 100%;
  background-image: url("/static/img/3.jpg");
}
.right{
  height: 27rem;
}

.right h4{
  font-size: 1.8rem;
  color: rgb(238, 38, 99);
}

.submail>>>.el-input{
  width: 60%;
  font-size: 1.2rem;
  margin-top: 2.5rem;
  margin-left: 1rem;
  padding: 1rem 0 0 1.6rem;
  border: 0;

  /*border-bottom: 1px solid rgb(28, 16, 17);*/
}
.submail>>>.el-input__inner{
  border: 0;
  border-bottom: 1px solid rgb(28, 16, 17);
  border-radius: 0;
  color: black;
  background-color: rgba(0, 0, 0, 0);
}

.foot{
  position: relative;
  margin-bottom:1rem;
}
/*提交按钮样式*/
.submit{
  width: 50%;
  height: 3rem;
  color: #f6f6f6;
  background-image: linear-gradient(120deg, #fa384a 0%, #f8f01e 100%);
  font-size: 1.2rem;
  border: none;
  border-radius: 1rem;
  margin: 2rem 0 0 50%;
  transform: translateX(-50%);
  margin-top:1rem;
}
.submit:hover {
  box-shadow: 0 0 2rem -0.5rem rgb(0 0 0/15%);
}

.else {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
}
.else a{
  font-size: 1.2rem;
  margin-top: 1rem;
  padding: 1rem 2rem;
  color: #666;
  text-decoration: none;
}
.else a:hover {
  color: rgb(236, 25, 42);
}
</style>
